<template>
	<div>
      <blur :blur-amount=40 :url="url" :height="160">
        <div style="padding:0px 10px 0px 10px;">
        <flexbox>
        <flexbox-item>
            <div class="profile-icon-2">
            <router-link :to="'/'">
                &#xe6c8;
            </router-link>
            </div>
        </flexbox-item>
        <flexbox-item><div class="center" style="padding-top:0px;">个人控制面板</div></flexbox-item>
        <flexbox-item>
            <div @click="logout" class="profile-icon-2 right">&#xe69f;</div>
        </flexbox-item>
        </flexbox>
        </div>
        <p class="center" style="padding-top:6px;"><img :src="info.data.picurl_prefix + info.data.picture"></p>
        <p style="text-align:center; color:#fff;font-size:14px;padding-top:10px;">
					{{ info.data.name }}
        </p>
      </blur>
    </div>
</template>

<script>
import { Flexbox, Card, FlexboxItem, Blur, TransferDomDirective as TransferDom } from 'vux'

export default {
  directives: {
    TransferDom
  },
  components: {
    Card,
    Flexbox,
    FlexboxItem,
    Blur
  },
  data () {
    return {
      info: null,
      url: 'https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg'
    }
  },
  created () {
    this.initData()
  },
  methods: {
    initData () {
      this.info = JSON.parse(localStorage.token)
    },
    logout () {
      let _this = this
      this.$vux.confirm.show({
        title: '友情提醒',
        content: '确定要退出账号吗',
        onConfirm () {
          localStorage.clear()
          _this.$vux.alert.show({ title: '提示', content: '退出成功，请从APP处重新登陆' })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.center {
  text-align: center;
  padding-top: 20px;
  color: #fff;
  font-size: 18px;
}
.center img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid #ececec;
}
@font-face {
  font-family: 'iconfont';  /* project id 367415 */
  src: url('//at.alicdn.com/t/font_367415_vgqiklqcb6672e29.eot');
  src: url('//at.alicdn.com/t/font_367415_vgqiklqcb6672e29.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_367415_vgqiklqcb6672e29.woff') format('woff'),
  url('//at.alicdn.com/t/font_367415_vgqiklqcb6672e29.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_367415_vgqiklqcb6672e29.svg#iconfont') format('svg');
}
.profile-icon-2 {
  font-family: 'iconfont';
  font-size: 24px;
  color:#ffffff;
}
</style>
